<template>
  <el-table
      :data="patientList"
      style="width: 100%"
      row-key="id"
      :expand-row-keys="expandRowKeys"
      @row-click="handleRowClick"
  >
    <!-- 多选列 -->
    <el-table-column type="selection" width="55" />

    <!-- 展开控制列 -->
    <el-table-column width="80">
      <template #default="{ row }">
        <el-icon
            :class="['arrow', { 'rotate': isExpanded(row) }]"
            @click.stop="toggleExpand(row)"
        >
          <ArrowRight />
        </el-icon>
      </template>
    </el-table-column>

    <!-- 基本信息列 -->
    <el-table-column label="患者信息">
      <template #default="{ row }">
        <div class="main-info">
          <span class="name">{{ row.name }}</span>
          <span class="meta">（{{ row.gender }} / {{ row.age }}岁）</span>
        </div>
      </template>
    </el-table-column>

    <!-- 展开行 -->
    <el-table-column type="expand">
      <template #default="{ row }">
        <div class="expand-content">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="联系方式">
              {{ row.contact }}
            </el-descriptions-item>
            <el-descriptions-item label="最后咨询时间">
              {{ row.lastConsultTime }}
            </el-descriptions-item>
            <el-descriptions-item label="当前状态">
              <el-tag :type="statusType[row.status]">
                {{ row.status }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="风险等级">
              <risk-level :level="row.riskLevel" />
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="用户ID" align="center" prop="userId"/>
    <el-table-column type="expand">
      <template #default="{ row }">
        <div class="expand-content">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="联系方式">
              {{ row.contact }}
            </el-descriptions-item>
            <el-descriptions-item label="最后咨询时间">
              {{ row.lastConsultTime }}
            </el-descriptions-item>
            <el-descriptions-item label="当前状态">
              <el-tag :type="statusType[row.status]">
                {{ row.status }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="风险等级">
              <risk-level :level="row.riskLevel" />
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="用户账号" align="center" prop="userName"/>
    <el-table-column label="用户邮箱" align="center" prop="email"/>
    <el-table-column label="手机号码" align="center" prop="phonenumber"/>

    <!-- 其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      expandRowKeys: [],
      statusType: {
        pending: 'warning',
        completed: 'success',
        expired: 'danger'
      },
      patientList: [
        // 示例数据
        {
          id: 1,
          name: '张*',
          gender: '男',
          age: 28,
          contact: '138****5678',
          lastConsultTime: '2023-08-20 14:30',
          status: 'pending',
          riskLevel: 2
        }
      ]
    }
  },
  methods: {
    toggleExpand(row) {
      const index = this.expandRowKeys.indexOf(row.id)
      if (index > -1) {
        this.expandRowKeys.splice(index, 1)
      } else {
        this.expandRowKeys = [row.id] // 保持单行展开
      }
    },
    isExpanded(row) {
      return this.expandRowKeys.includes(row.id)
    },
    handleRowClick(row) {
      // 处理行点击事件（可选）
    }
  }
}
</script>

<style scoped>
.arrow {
  transition: transform 0.3s;
  cursor: pointer;
}
.arrow.rotate {
  transform: rotate(90deg);
}

.expand-content {
  padding: 20px 50px;
  background: #f8f9fa;
}

.main-info {
  line-height: 1.5;
}
.name {
  font-weight: 500;
  margin-right: 8px;
}
.meta {
  color: #909399;
}
</style>
